<template>
    <div class="UserMonthTotalChart-container">
        <div id="main" style="width: 100%;height: 300px;"></div>
    </div>
</template>

<script>
    import echarts from 'echarts'

    export default {
        name: 'YearTotalChart',
        props: ['parentSwitchYear', 'yearData'],
        data() {
            return {
            }
        },
        watch: {
            parentSwitchYear(newVal, oldVal) {
                this.generatorCharts('main')
            }
        },
        methods: {
            generatorCharts(id) {
                const arr = []
                setTimeout(()=>{

                    for(let key of Object.keys(this.yearData)) {
                        arr.push(this.yearData[key])
                    }
                    // 基于准备好的dom，初始化echarts实例
                    var myChart = echarts.init(document.getElementById('main'));
                    myChart.setOption({
                        title: {
                            text: this.parentSwitchYear + ' 车辆损伤汇总',
                            fontSize: 100,
                            textStyle: {
                                align: 'center',
                                width: '100%'
                            }
                        },
                        color: ['#3398DB'],
                        tooltip : {
                            trigger: 'axis',
                            axisPointer : {            // 坐标轴指示器，坐标轴触发有效
                                type : 'shadow'        // 默认为直线，可选为：'line' | 'shadow'
                            }
                        },
                        grid: {
                            left: '3%',
                            right: '4%',
                            bottom: '3%',
                            containLabel: true
                        },
                        xAxis : [
                            {
                                type : 'category',
                                data : ['一月', '二月', '三月', '四月', '五月', '六月', '七月', '八月', '九月', '十月', '十一月', '十二月'],
                                axisTick: {
                                    alignWithLabel: true
                                }
                            }
                        ],
                        yAxis : [
                            {
                                type : 'value'
                            }
                        ],
                        series : [
                            {
                                name:'车辆损伤',
                                type:'bar',
                                barWidth: '60%',
                                data: arr
                            }
                        ]
                    });
                }, 500)
            }
        },
        mounted() {
            this.$nextTick(function () {
                this.generatorCharts('main')
            })

        }
    }
</script>

<!-- 局部样式 -->
<style rel="stylesheet/scss" lang="scss" scoped>

</style>